<template>
  <div class="carousel-container">
    <div class='carousel-box'>
      <div class="carousel-wrap">
        <el-carousel :interval='5000' height='420px'>
          <el-carousel-item v-for='(item,index) in bannerList' :key='index'>
            <a :href="urlOrigin + item.url" target="_blank" @click="setLog(item.url, '主页banner')">
              <!-- <img :src="prefixImg + item.image" class="carousel-img"/> :style="{backgroundImage: `url(${prefixImg + item.image})`}"  -->
              <b v-lazy:background-image="prefixImg + item.image" class="carousel-bg"></b>
            </a>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="personal-wrap">
        <div class="personal-info">
          <router-link :to="{name: 'memberCenter'}" target="_blank">
            <div>
              <img :src="prefixImg + headImg" alt="用户头像" class="avatar headImg" width="56px" height="56px" @error="catchErrorImage($event)"/>
            </div>
            <p class="username ellipsis"> {{loginStatus !== 4 ? `你好,${username}`: `Hello，刀具联盟欢迎你～` }}</p>
          </router-link>
          <div class="line"></div>
          <div class="order-box" v-if="loginStatus !== 4">
            <router-link :to="{name: 'orderManage',query: {name: '0'}}" target="_blank">
              <h4 >{{orderStatics.notPayedNum ? orderStatics.notPayedNum : 0}}</h4>
              <p>待支付</p>
            </router-link>
            <router-link :to="{name: 'orderManage',query: {name: '1'}}" target="_blank">
              <h4>{{orderStatics.notDeliverNum ? orderStatics.notDeliverNum : 0}}</h4>
              <p>待发货</p>
            </router-link>
            <!-- <router-link :to="{name: 'orderManage',query: {name: '1'}}" target="_blank">
              <h4>{{orderStatics.afterSaleNum ? orderStatics.afterSaleNum : 0}}</h4>
              <p>退款中</p>
            </router-link> -->
          </div>
          <div class="login-box" v-else>
            <router-link class="btn btn-ora" :to="{name: 'Register'}">立即注册</router-link>
            <router-link class="btn btn-circle" :to="{name: 'Login'}">马上登录</router-link>
            <!-- <span class="btn-ora">立即注册</span>
            <span class="btn-cicle">马上登录</span> -->
          </div>
        </div>
        <div class="pub-box">
          <div class="title">
            <h3>公告</h3>
            <span class="under-word-line"></span>
          </div>
          <div class="content ">
            <router-link 
            :to="{name: 'NoticeContent', params: {type: 'website', id: item.id}}"
            target="_blank"
            class="text ellipsis" 
            v-for="(item, index) in noticeList.slice(0,5)" :key="index">{{item.title}}</router-link >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {Carousel, CarouselItem} from 'element-ui'
  import {getBannerList, activityJoinLog, noticelist, getOrderStatics} from '@/service/get-data'
  import {prefixImg} from '@/tool/index'
  export default {
    name: 'carousel',
    components: {
      elCarousel: Carousel,
      elCarouselItem: CarouselItem
    },
    data () {
      return {
        bannerList: [], // 轮播列表
        noticeList: [],
        orderStatics: {} // 订单状态
      }
    },
    props: ['username', 'activityId'],
    computed: {
      prefixImg () {
        return prefixImg
      },
      urlOrigin () {
        return window.location.origin
      },
      loginStatus () {
        return this.$store.getters.loginStatus - 0
      },
      headImg () {
        return (this.$store.state.user && this.$store.state.user.headImg) || null
      }
    },
    methods: {
      catchErrorImage (e) {
        e.target.src = require('img/person_logo.png')
      },
      // getOrderStatics 获取待支付待发货退款中订单统计
      async fetchOrderStatics () {
        let res = await getOrderStatics()
        if (res.data.resultCode && res.data.resultCode === 2000) {
          this.orderStatics = res.data.data
        } else {
          console.error(res.data.resultMsg)
        }
      },
      // 获取banner图片list
      async getBannerList () {
        let loading = this.$loading({target: '.carousel-box'})
        let res = await getBannerList()
        res = res.data
        if (res.resultCode && res.resultCode === 2000) {
          this.$store.commit('BANNERLIST', res.data)
          this.bannerList = res.data
          this.$store.commit('BANNERLIST', res.data)
          loading.close()
        } else {
          this.$message({message: res.resultMsg})
        }
      },
      // 活动日志
      async setLog (url, text) {
        if (url !== '/#/activityGoods') { return }
        let res = await activityJoinLog(this.username, this.activityId, text)
        if (res.data.resultCode && res.data.resultCode === 2000) {
        } else {
          console.error(res.data.resultMsg || '网络出错')
        }
      },
      // 公告
      async fetchNoticeList () {
        let res = await noticelist(this.page, this.number, 0)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          this.noticeList = res.data.data.list
        } else {
          console.error(res.data.resultMsg)
        }
      }
    },
    mounted () {
      this.getBannerList()
      this.fetchNoticeList()
      this.fetchOrderStatics()
    }
  }
</script>

<style lang='scss' scoped>
  $font_color:#474747;
  .pr10{padding-right: 10px;}
  .bg-f6{background: #f6f6f6;}
  .bg-ee{background: #EEEEEE;}
  .carousel-container{
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .carousel-box{
    position:relative;
    width: 1190px;
    margin: 0 auto 0;
    overflow: hidden;
    // margin-bottom: 20px;
  }
  .carousel-wrap{
    float: left;
    width: 690px;
    margin-left: 200px;
    border: 1px solid #eee;
    box-sizing: border-box;
  }
  .personal-wrap{
    width: 290px;
    float: right;
    height: 420px;
    overflow: hidden;
    // background: #F8F8F8;
    margin-left: 10px;
    .personal-info{
      padding: 20px 18px 12px;
      background: #fff;
      height: 190px;
      text-align: center;
      border:1px solid rgba(238,238,238,1);
      box-sizing: border-box;
      .avatar{
        display: inline-block;
        margin-bottom: 10px;
        border-radius: 50%;
      }
      .headImg{
        border: 1px solid #eee;
      }
      .username{
        display: inline-block;
        width: 190px;
        @include fontbase(#333, 14px, 20px);
        margin-bottom: 25px;
      }
      .line{
        border-bottom: 1px solid #F8F8F8;
      }
      .order-box{
        display: flex;
        justify-content: space-around;
        margin-top: 9px;
        h4{
          font-family: ArialRoundedMTBold;
          font-size: 16px;
          color: #E23433;
        }
        p{
          @include fontbase(#999, 12px, 17px);
          margin-top: 2px;
        }
      }
      .login-box{
        padding-top: 12px;
        text-align: center;
        font-size: 0;
        .btn{
          width: 72px;
          height: 28px;
          margin-right: 10px;
          line-height: 28px;
          border-radius: 4px;
          display: inline-block;
          font-size: 12px;
          box-sizing: border-box;
        }
        .btn-ora{
          background: #F2572F;
          color: #fff;
          margin-right: 10px;
        }
        .btn-circle{
          border:1px solid rgba(242,87,47,1);
          color: #F2572F;
        }
      }
    }
    .pub-box{
      padding: 18px 20px 10px;
      background: #fff;
      height: 220px;
      margin-top: 10px;
      border:1px solid rgba(238,238,238,1);
      box-sizing: border-box;
      .title{
        font-size: 0;
        text-align: center;
        h3{
          @include fontbase(#333, 14px, 20px);
          margin-bottom: 2px
        }
      }
      .content{
        margin: 4px 0;
        
        @include fontbase(#666, 12px, 20px);
        .text{
          line-height: 33px;
          border-bottom: 1px solid #f8f8f8;
          display: block;
          &:last-child{
            border-bottom: none;
          }
        }
      }
    }
      
  }
  
 
  .el-carousel__item {
    background-size:100%;
    background-repeat: no-repeat;
  }
  .carousel-img{
    width: 100%;
    height:100%;
  }
  .carousel-bg{
    width: 100%;
    height: 100%;
    background-position: center;
    position: relative;
    background-size: cover;
    display: block;
    background-repeat: no-repeat;
  }
</style>




